---
import BoxerClipCard from './BoxerClipCard.astro'
import Youtube from '@/assets/svg/youtube.svg'

interface Clip {
  text: string
  url: string
}

interface BoxerClipProps {
  clips?: Clip[]
  externalPlayer?: boolean
}

const { clips = [], externalPlayer } = Astro.props as BoxerClipProps
const clips_sorted_by_text_size = clips.sort((a, b) => b.text.length - a.text.length)
---

<input type="checkbox" id="clip-drawer-toggle" class="hidden" />

<ul>
  {
    clips_sorted_by_text_size.map((clip, i) => (
      <BoxerClipCard externalPlayer={externalPlayer} index={i} text={clip.text} url={clip.url} />
    ))
  }
  <li class="mt-4 flex cursor-pointer justify-end p-0">
    <label
      for="clip-drawer-toggle"
      style={{ animationDelay: `${400 * clips.length}ms` }}
      class="animate-fade-in-up text-dark-magenta duration-600 relative mt-2 flex h-6 cursor-pointer items-center justify-end rounded-sm bg-white/20 px-2 py-0 text-sm hover:scale-105"
    >
      <Youtube class="mr-2 inline-flex w-4 text-red-600" />
      <span class="text-xs">Ver clips del combate</span>
    </label>
  </li>
</ul>
<!-- End ListClips -->
